<template>
    <!-- 头部 -->
    <div class="h-50px leading-50px w-full bg-#15B19A position-sticky z-10 text-(center white)">
        <span class="text-24px">LRC答题卡制作工具</span>
        <div class="float-right mr-30px">
            <a
                href="https://oyicn.link/ul/YbU25D?channelId=2000691"
                class="text-white decoration-none hover:decoration-underline"
                target="_blank"
            >
                回到OKX
            </a>
        </div>
    </div>
    <!-- 正文 -->
    <div class="flex justify-between px-5px">
        <!-- 左边 -->
        <div class="basis-1/8 flex flex-col">
            <div class="w-100px mt-30px">
                当前总分
                <span class="text-(24px #1daef8)">0</span>
                分
            </div>
            <div class="w-93px mt-5px border-(1px solid #e3e6e7)">
                <div class="flex justify-between bg-#f7f8fa p-[5px_8px]">
                    <div>布局</div>
                    <div class="text-#1daef8 cursor-pointer" @click="changeLayout">修改</div>
                </div>
                <div class="bg-#fff p-[10px_8px] flex flex-col gap-10px">
                    <div>{{ dtkStore.layoutInfoName.paperSizeName }}</div>
                    <div>{{ dtkStore.layoutInfoName.answerSheetLayoutName }}</div>
                    <div>{{ dtkStore.layoutInfoName.gradingMethodName }}</div>
                </div>
            </div>
        </div>
        <div
            class="overflow-x-auto bg-white text-center border-(1px solid #888) m-b-20px rounded-3px mt-30px flex justify-center"
        >
            <div class="h-1167px" :class="dtkStore.dtkWidthClass">
                <div>
                    <svg width="744" height="78.5" viewBox="0 0 1488 157"><defs></defs></svg>
                </div>
                <div class="position-relative">
                    <textarea :class="dtkStore.textareaClass" @focus="handleTextareaFocus" @blur="handleTextareaBlur">
请输入答题卡标题</textarea
                    >
                </div>
                <div>
                    <svg width="744" :height="330.5 + dtkStore.svgAutoHeight" viewBox="0 0 1488 661">
                        <text
                            x="0"
                            :y="143 + dtkStore.svgAutoHeight"
                            style="font-size: 33px; font-family: 文泉驿微米黑"
                        >
                            考号：
                        </text>
                        <line
                            x1="78"
                            x2="259"
                            :y1="149 + dtkStore.svgAutoHeight"
                            :y2="149 + dtkStore.svgAutoHeight"
                            :stroke="dtkStore.dtkColor"
                            :fill="dtkStore.dtkColor"
                            style=""
                        ></line>
                        <text
                            x="598"
                            :y="143 + dtkStore.svgAutoHeight"
                            style="font-size: 33px; font-family: 文泉驿微米黑"
                        >
                            班级：
                        </text>
                        <line
                            x1="677"
                            x2="858"
                            :y1="149 + dtkStore.svgAutoHeight"
                            :y2="149 + dtkStore.svgAutoHeight"
                            :stroke="dtkStore.dtkColor"
                            :fill="dtkStore.dtkColor"
                            style=""
                        ></line>
                        <text
                            x="299"
                            :y="143 + dtkStore.svgAutoHeight"
                            style="font-size: 33px; font-family: 文泉驿微米黑"
                        >
                            姓名：
                        </text>
                        <line
                            x1="377"
                            x2="559"
                            :y1="149 + dtkStore.svgAutoHeight"
                            :y2="149 + dtkStore.svgAutoHeight"
                            :stroke="dtkStore.dtkColor"
                            :fill="dtkStore.dtkColor"
                            style=""
                        ></line>
                        <rect
                            x="0"
                            :y="173 + dtkStore.svgAutoHeight"
                            width="992"
                            height="78"
                            :stroke="dtkStore.dtkColor"
                            :fill="dtkStore.dtkColor"
                            style="fill-opacity: 0"
                        ></rect>
                        <text
                            x="405"
                            :y="228 + dtkStore.svgAutoHeight"
                            style="font-size: 33px; font-family: 文泉驿微米黑"
                        >
                            注 意 事 项
                        </text>
                        <rect
                            x="0"
                            :y="251 + dtkStore.svgAutoHeight"
                            width="992"
                            height="299"
                            :stroke="dtkStore.dtkColor"
                            style="fill-opacity: 0"
                        ></rect>
                        <text
                            x="15"
                            :y="312 + dtkStore.svgAutoHeight"
                            :fill="dtkStore.dtkColor"
                            linePadding="1.9"
                            style="font-size: 25px; font-family: 文泉驿微米黑"
                        >
                            1.　答题前请将姓名、班级、考场、座号和准考证号填写清楚。
                        </text>
                        <text
                            x="15"
                            :y="359 + dtkStore.svgAutoHeight"
                            :fill="dtkStore.dtkColor"
                            linePadding="1.9"
                            style="font-size: 25px; font-family: 文泉驿微米黑"
                        >
                            2.　客观题答题,必须使用2B铅笔填涂,修改时用橡皮擦干净。
                        </text>
                        <text
                            x="15"
                            :y="407 + dtkStore.svgAutoHeight"
                            :fill="dtkStore.dtkColor"
                            linePadding="1.9"
                            style="font-size: 25px; font-family: 文泉驿微米黑"
                        >
                            3.　主观题必须使用黑色签字笔书写。
                        </text>
                        <text
                            x="15"
                            :y="455 + dtkStore.svgAutoHeight"
                            :fill="dtkStore.dtkColor"
                            linePadding="1.9"
                            style="font-size: 25px; font-family: 文泉驿微米黑"
                        >
                            4.　必须在题号对应的答题区域内作答,超出答题区域书写无效。
                        </text>
                        <text
                            x="15"
                            :y="502 + dtkStore.svgAutoHeight"
                            :fill="dtkStore.dtkColor"
                            linePadding="1.9"
                            style="font-size: 25px; font-family: 文泉驿微米黑"
                        >
                            5.　保持答卷清洁完整。
                        </text>
                        <rect
                            x="0"
                            :y="551 + dtkStore.svgAutoHeight"
                            width="992"
                            height="100"
                            :stroke="dtkStore.dtkColor"
                            style="fill-opacity: 0"
                        ></rect>
                        <text
                            x="11"
                            :y="611 + dtkStore.svgAutoHeight"
                            :fill="dtkStore.dtkColor"
                            style="font-size: 33px; font-family: 文泉驿微米黑"
                        >
                            正确填涂
                        </text>
                        <rect
                            x="232"
                            :y="590 + dtkStore.svgAutoHeight"
                            width="31"
                            height="19"
                            stroke="#000000"
                            fill="#000000"
                            style="fill-opacity: 1"
                        ></rect>
                        <text
                            x="342"
                            :y="611 + dtkStore.svgAutoHeight"
                            :fill="dtkStore.dtkColor"
                            style="font-size: 33px; font-family: 文泉驿微米黑"
                        >
                            缺考标记
                        </text>
                        <rect
                            x="618"
                            :y="590 + dtkStore.svgAutoHeight"
                            width="31"
                            height="19"
                            stroke="#000000"
                            style="fill-opacity: 0"
                        ></rect>
                        <rect
                            x="992"
                            :y="173 + dtkStore.svgAutoHeight"
                            width="496"
                            height="478"
                            :stroke="dtkStore.dtkColor"
                            style="fill-opacity: 0"
                        ></rect>
                        <g>
                            <rect
                                x="1003"
                                :y="270 + dtkStore.svgAutoHeight"
                                width="472"
                                height="283"
                                :stroke="dtkStore.dtkColor"
                                rx="20"
                                ry="20"
                                style="fill-opacity: 0; stroke-dasharray: 10, 10"
                            ></rect>
                            <text
                                x="1142"
                                :y="430 + dtkStore.svgAutoHeight"
                                :fill="dtkStore.dtkColor"
                                style="font-size: 38px; font-family: 文泉驿微米黑"
                            >
                                贴条形码区
                            </text>
                        </g>
                        <g v-if="dtkStore.baseInfo.checked4">
                            <rect
                                x="0"
                                :y="0 - dtkStore.svgAutoHeight"
                                width="299"
                                height="157"
                                :stroke="dtkStore.dtkColor"
                                style="fill-opacity: 0"
                            ></rect>
                            <text
                                x="15"
                                :y="60 - dtkStore.svgAutoHeight"
                                style="font-size: 33px; font-family: 文泉驿微米黑"
                            >
                                试卷
                            </text>
                            <text
                                x="15"
                                :y="123 - dtkStore.svgAutoHeight"
                                style="font-size: 33px; font-family: 文泉驿微米黑"
                            >
                                类型
                            </text>
                            <text
                                x="118"
                                :y="60 - dtkStore.svgAutoHeight"
                                style="font-size: 33px; font-family: 文泉驿微米黑"
                            >
                                试卷A
                            </text>
                            <text
                                x="118"
                                :y="123 - dtkStore.svgAutoHeight"
                                style="font-size: 33px; font-family: 文泉驿微米黑"
                            >
                                试卷B
                            </text>
                            <line
                                x1="102"
                                x2="102"
                                :y1="0 - dtkStore.svgAutoHeight"
                                :y2="157 - dtkStore.svgAutoHeight"
                                :stroke="dtkStore.dtkColor"
                                style=""
                            ></line>
                            <rect
                                x="-63"
                                :y="37 - dtkStore.svgAutoHeight"
                                width="31"
                                height="19"
                                stroke="#000000"
                                fill="#000000"
                                style="fill-opacity: 1"
                            ></rect>
                            <rect
                                x="-63"
                                :y="100 - dtkStore.svgAutoHeight"
                                width="31"
                                height="19"
                                stroke="#000000"
                                fill="#000000"
                                style="fill-opacity: 1"
                            ></rect>
                            <rect
                                x="232"
                                :y="37 - dtkStore.svgAutoHeight"
                                width="31"
                                height="19"
                                :stroke="dtkStore.dtkColor"
                                lineWidth="0.3"
                                style="fill-opacity: 0; stroke-width: 3"
                            ></rect>
                            <rect
                                x="232"
                                :y="100 - dtkStore.svgAutoHeight"
                                width="31"
                                height="19"
                                :stroke="dtkStore.dtkColor"
                                lineWidth="0.3"
                                style="fill-opacity: 0; stroke-width: 3"
                            ></rect>
                        </g>
                    </svg>
                </div>
                <div
                    v-if="dtkStore.layoutInfo.gradingMethod == 2"
                    class="mx-19.5px mt-0 w-744px border-(1px solid #888888) overflow-hidden text-left"
                >
                    <div class="p-[5px_5px] h-78px">
                        <div class="flex items-center">
                            <span>长条打分正确打分：</span>
                            <span class="score-success"></span>
                            <span>(得分为2分)</span>
                        </div>
                        <div class="flex items-center">
                            <span>修改打分：</span>
                            <span class="score-error"></span>
                            <span>(得分为4分,取填涂更多的为最终得分)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="basis-1/8">
            <div class="w-320px bg-white border-(1px solid #e3e6e7) border-t-none">
                <div class="max-h-1165px overflow-auto">
                    <div class="title">设置答题卡基础信息</div>
                    <div class="flex flex-col gap-10px p-[15px_30px]">
                        <div>
                            <el-checkbox v-model="proxyChecked1" label="密封线" />
                        </div>
                        <div v-if="!dtkStore.baseInfo.checked1" class="px-20px">
                            <el-radio-group v-model="proxyRadio1">
                                <el-radio :value="1">考号填涂区</el-radio>
                                <el-radio :value="2">条形码</el-radio>
                                <el-radio :value="3">手写考号</el-radio>
                            </el-radio-group>
                            <el-checkbox v-model="proxyChecked2" label="注意事项与缺考标记" />
                            <el-checkbox v-model="dtkStore.baseInfo.checked3" label="每页填写考号" />
                        </div>
                        <div v-if="dtkStore.baseInfo.checked1" class="px-20px">
                            <el-radio-group v-model="dtkStore.baseInfo.radio2">
                                <el-radio :value="1">双面打印</el-radio>
                                <el-radio :value="2">单面打印</el-radio>
                            </el-radio-group>
                        </div>
                        <div>
                            <div class="flex gap-14.8">
                                <el-checkbox v-model="dtkStore.baseInfo.checked4" label="存在AB卷" />
                                <el-checkbox v-model="dtkStore.baseInfo.checked5" label="红色答题卡" />
                            </div>
                            <div class="flex gap-4">
                                <el-checkbox v-model="dtkStore.baseInfo.checked6" label="客观题竖向排列" />
                                <el-checkbox v-model="dtkStore.baseInfo.checked7" label="分区答题卡" />
                            </div>
                            <div class="flex">
                                <el-checkbox v-model="dtkStore.baseInfo.checked8" label="自定义页眉" />
                            </div>
                        </div>
                    </div>
                    <div class="title">添加题目</div>
                    <div class="flex flex-col gap-10px p-[15px_30px]">
                        <div class="flex gap-10px">
                            <div class="button">
                                <el-icon :size="12" color="#1daef8">
                                    <Plus />
                                </el-icon>
                                <div class="text-#1daef8">客观题</div>
                            </div>
                            <div class="button">
                                <el-icon :size="12" color="#1daef8">
                                    <Plus />
                                </el-icon>
                                <div class="text-#1daef8">填空题</div>
                            </div>
                            <div class="button">
                                <el-icon :size="12" color="#1daef8">
                                    <Plus />
                                </el-icon>
                                <div class="text-#1daef8">主管题</div>
                            </div>
                        </div>
                        <div class="flex gap-10px">
                            <div class="button">
                                <el-icon :size="12" color="#1daef8">
                                    <Plus />
                                </el-icon>
                                <div class="text-#1daef8">选做题</div>
                            </div>
                            <div class="button">
                                <el-icon :size="12" color="#1daef8">
                                    <Plus />
                                </el-icon>
                                <div class="text-#1daef8">作文(英)</div>
                            </div>
                            <div class="button">
                                <el-icon :size="12" color="#1daef8">
                                    <Plus />
                                </el-icon>
                                <div class="text-#1daef8">作文(语)</div>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="button">
                                <el-icon :size="12" color="#1daef8">
                                    <Plus />
                                </el-icon>
                                <div class="text-#1daef8">非作答区</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-t-(1px solid #e3e6e7) text-center py-20px px-0 flex justify-around">
                    <div class="handle-button bg-#50c059 hover:bg-#449D44">预览</div>
                    <div class="handle-button bg-#39f hover:bg-#286090">下载</div>
                </div>
            </div>
        </div>
    </div>
    <layout-popup v-if="dtkStore.showLayout" ref="layoutRef" @close="dtkStore.showLayout = false" />
</template>
<script setup lang="ts">
import { useDtkStore } from '@/stores/dtk'
import feedback from '@/utils/feedback'
import { Plus } from '@element-plus/icons-vue'
import { computed, nextTick, onMounted, ref } from 'vue'
import LayoutPopup from './components/layout.vue'

const dtkStore = useDtkStore()
const layoutRef = ref<any>(null)

// 监听“密封线”变化
const proxyChecked1 = computed({
    get: () => dtkStore.baseInfo.checked1,
    set: async (newVal: boolean) => {
        await feedback.confirm('修改后手动编辑的内容会消失，确定修改吗？')
        dtkStore.baseInfo.checked1 = newVal
    }
})

// 监听“手写考号”变化
const proxyRadio1 = computed({
    get: () => dtkStore.baseInfo.radio1,
    set: (newVal: number) => {
        if (newVal === 3 && dtkStore.baseInfo.checked2) {
            return feedback.alertError('手写考号不支持勾选号注意事项与缺考标记,请先取消勾选')
        }
        dtkStore.baseInfo.radio1 = newVal
    }
})

// 监听“注意事项与缺考标记”变化
const proxyChecked2 = computed({
    get: () => dtkStore.baseInfo.checked2,
    set: (newVal: boolean) => {
        if (dtkStore.baseInfo.radio1 === 3) {
            return feedback.alertError('手写考号不支持勾选号注意事项与缺考标记')
        }
        dtkStore.baseInfo.checked2 = newVal
    }
})

const changeLayout = async () => {
    await feedback.confirm('修改后手动编辑的内容会消失，确定修改吗？')
    dtkStore.showLayout = true
    nextTick(() => {
        layoutRef.value.open()
    })
}

// textarea事件
const handleTextareaFocus = (e: Event) => {
    if ((e.target as HTMLTextAreaElement).value === '请输入答题卡标题') {
        ;(e.target as HTMLTextAreaElement).value = ''
    }
}
const handleTextareaBlur = (e: Event) => {
    if ((e.target as HTMLTextAreaElement).value === '') {
        ;(e.target as HTMLTextAreaElement).value = '请输入答题卡标题'
    }
}

onMounted(() => {
    dtkStore.showLayout = true
    nextTick(() => {
        layoutRef.value.open()
    })
})
</script>
<style scoped>
.title {
    @apply bg-#f7f8fa h-40px leading-40px text-(left 16px) font-700 p-[0_30px] border-(1px solid #e3e6e7);
}
.button {
    @apply w-75px h-36px border-(1px solid #1daef8) flex items-center justify-center gap-2px cursor-pointer;
}
.handle-button {
    @apply w-80px h-40px text-(white 18px) border-(1px solid #4cae4c) rounded-4px flex justify-center items-center cursor-pointer;
}
.textarea-no-checked4 {
    @apply text-center position-absolute resize-none left-19px top-0 h-39px w-744px text-23px border-dashed word-break z-999 overflow-y-hidden leading-35px;
}
.textarea-checked4 {
    @apply text-center position-absolute resize-none left-198px top-0 h-78px w-565px text-23px border-dashed word-break z-999 overflow-y-hidden leading-35px;
}
.score-success {
    display: inline-block;
    width: 100px;
    height: 33px;
    background: url()
        no-repeat;
    background-size: 100% 100%;
}
.score-error {
    display: inline-block;
    width: 100px;
    height: 33px;
    background: url()
        no-repeat;
    background-size: 100% 100%;
}
</style>
